<template>
  <div>
    <DynamicTable row-key="id" header-title="待处理工单" :showToolBar="props.showToolBar" :search="props.search" show-index
      :data-request="todoList" :columns="columns" bordered size="small" :scroll="{ x: 2000 }">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'workOrderNumber'">
          <a class="workOrderNumber" v-on:click="openMenuModal(record)">{{ record.workOrderNumber }} </a>
        </template>
        <template v-if="column.dataIndex === 'handle'">
          <a class="workOrderNumber" v-on:click="toHandle(record)">办理</a>
        </template>
      </template>
    </DynamicTable>
    <DraggableModal v-model:visible="processHisvisible" :title="modelTitle"
      :body-style="{ maxHeight: '50vh', overflowY: 'auto' }" :destroyOnClose="true" :centered=false width="60%"
      :keyboard="false" :fullscreen=false :closable=true footer="">
      <processHistory :process-his-show="processHisShow" :order-info-show="orderInfoShow" :data-object="pageDataObj"
        :work-order-number="workOrderNumber" :instance-id="instanceId"></processHistory>
    </DraggableModal>
  </div>
</template>

<script lang="ts" setup>
import { baseColumns, pageDataObj, type TableColumnItem } from './columns';
import { dictPotionsListApi } from '@/api/workorder/select';
import { todoList } from '@/api/workorder/task';
import { useTable } from '@/components/core/dynamic-table';
import { getDeptList } from '@/api/system/dept';
import { useRouter } from 'vue-router'
import { ref } from "vue";
import { string } from "vue-types";
import processHistory from '@/views/workorder/task/processHistory/index.vue';
import { DraggableModal } from '@/components/core/draggable-modal';
import { getCategaryList } from '@/api/workorder/categary';



defineOptions({
  name: 'todo-workorder-list',
});

const props = defineProps({
  showToolBar: {
    type: Boolean,
    default: true,
    required: false,
  },
  search: {
    type: Boolean,
    default: true,
    required: false,
  },
})

// 流转历史是否显示
const processHisvisible = ref(false);
let instanceId = ref(string);
let workOrderNumber = ref(string);

const [DynamicTable, dynamicTableInstance] = useTable();
const router = useRouter()
let modelTitle = ref('');
let processHisShow = ref(false)
let orderInfoShow = ref(false);


// 自定义转码字典
dictPotionsListApi({ "code": 'workorder_type' }).then((res) => {
  pageDataObj.workOrderTypeDict = res.map((item) => ({
    label: item.name,
    value: item.code,
  }));
}).then(() => {
  // 改变搜索框数据
  dynamicTableInstance?.getQueryFormRef()?.updateSchema({
    field: `workOrderTypes`,
    componentProps: {
      options: pageDataObj.workOrderTypeDict,
    },
  });
});
dictPotionsListApi({ "code": 'info_serrces' }).then((res) => {
  pageDataObj.infoSerrcesTypeDict = res.map((item) => ({
    label: item.name,
    value: item.code,
  }));
})
dictPotionsListApi({ "code": 'region' }).then((res) => {
  pageDataObj.regionDict = res.map((item) => ({
    label: item.name,
    value: item.code,
  }));
}).then(() => {
  // 改变搜索框数据
  dynamicTableInstance?.getQueryFormRef()?.updateSchema({
    field: `regions`,
    componentProps: {
      options: pageDataObj.regionDict,
    },
  });
});
dictPotionsListApi({ "code": 'workorder_status' }).then((res) => {
  pageDataObj.workOrderStatus = res.map((item) => ({
    label: item.name,
    value: item.code,
  }));
}).then(() => {
  // 改变搜索框数据
  dynamicTableInstance?.getQueryFormRef()?.updateSchema({
    field: `workOrderStatus`,
    componentProps: {
      options: pageDataObj.workOrderStatus,
    },
  });
});
dictPotionsListApi({ "code": 'area' }).then((res) => {
  pageDataObj.areaDict = res.map((item) => ({
    label: item.name,
    value: item.code,
  }));
})
getCategaryList({ "sysCode": 'workorder', 'visible': '0', 'categaryCode': 'industry_type' }).then((res) => {
  pageDataObj.industryTypeDict = res.map((item) => ({
    label: item.name,
    value: item.code,
  }));
  dynamicTableInstance?.getQueryFormRef()?.updateSchema({
    field: `industryTypes`,
    componentProps: {
      treeData: formatCategary2Tree(res, '0'),
    },
  });
});
getDeptList().then((res) => {
  pageDataObj.responsibleUnitDict = res.map((item) => ({
    label: item.name,
    value: item.id,
  }));
})


const columns: TableColumnItem[] = [
  ...baseColumns,
  {
    title: '操作',
    width: 100,
    dataIndex: 'ACTION',
    hideInSearch: true,
    align: 'center',
    fixed: 'right',
    actions: ({ record }) => [
      {
        label: '流程',
        onClick: () => processHisvisibleModel(record)
      },
    ],
  },
];

const toHandle = (record) => {
  router.push({ name: 'workorder/todoworkorder', query: { itemId: record.id } })
}

/**
 * @description 打开新增/编辑弹窗
 */
async function openMenuModal(record) {
  // 打开操作框选择页面
  let data = record;
  processHisvisible.value = true;
  instanceId = data.instanceId;
  workOrderNumber = data.workOrderNumber;
  modelTitle.value = '工单信息';
  processHisShow.value = false;
  orderInfoShow.value = true;
};

async function processHisvisibleModel(record) {
  // 打开操作框选择页面
  processHisvisible.value = true;
  instanceId = record.instanceId;
  workOrderNumber = record.workOrderNumber;
  modelTitle.value = '流转历史';
  processHisShow.value = true;
  orderInfoShow.value = false;
}
</script>
<style lang="less">
.ant-input-number {
  width: 100%;
}

.workOrderNumber {
  color: #1890ff;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ant-tooltip-inner {
  width: 500px;
}
</style>

